<style type="text/css">
.body {
}

#boxcenter{
	height: auto;
	width: 760px;
	background-color: #444041;
}
body,td,th {
	color: #FFF;
}
</style>
<table width="100%" border="0" cellpadding="1" cellspacing="1">
  
  <tr class="txt_td">
    <!--th width="12%" height="25"  background="images/img/had.png">รหัสชั้นเรียน</th-->
    <th width="18%" height="25"  background="images/img/had.png">วิชาที่เปิดสอน</th>
    <th width="20%" height="25"  background="images/img/had.png">อาจารย์ผู้สอน</th>    
    <th width="10%" height="25"  background="images/img/had.png">จัดการข้อมูล</th>
  </tr>
<?php
   $sql_m = "select * from tb_sec NATURAL JOIN tb_subject NATURAL JOIN tb_teacher ORDER BY subject_id";
   $result_m = $dbfunc->query($sql_m);
   
   $j=1;
      while( $fetch_m= mysql_fetch_object($result_m)){
?>
  <tr>
    <!--td align="center" bgcolor="#999999"><? //echo $fetch_m->sec_id; ?></td-->
    <td align="center" bgcolor="#999999"><a title="<?php echo "คำอธิบายรายวิชา : ".$fetch_m->sec_des; ?>"><? echo $fetch_m->subject_name; ?></a></td>
    <td align="center" bgcolor="#999999"><? echo $fetch_m->teacher_name." ".$fetch_m->teacher_surname; ?></td>
    <td align="center" bgcolor="#999999" align="center">
    <a class="plan_popup" href="<?=$fetch_m->sec_id;?>">
        <img src="images/category.png" width="15" height="15" border="0" />
    </a>
    <a class="reg_popup" href="<?=$fetch_m->sec_id;?>">
    	<img src="images/add_icon.gif" />
    </a>
    </td>
  </tr>
<? }?> 
</table>
<style>
#plan_box,#reg_box{
	width: 900px;
	height: 500px;
	background: black;
	margin: 20px auto;
	opacity: 1;
	display: none;
	position: fixed; top: 10px; left:18%;
	z-index: 1000;
	border-radius: 15px;
        -moz-border-radius-topright: 15px;
        -webkit-border-top-right-radius: 15px;
	padding: 25px;
	border: #FFF solid 6px;
}
#plan_box > div ,#reg_box > div{	
	overflow-y: scroll;
	width: 100%;
	height: 100%;
}
#plan_box > div > div, #reg_box > div > div{	
	display: inline-block;
	float: left;
}
ul#room-list > li,ul#stu-list > li{
	cursor: pointer;
	margin-top: 10px;
	color: red;
}
ul#select-list > li,ul#select-stu > li{
	cursor: pointer;
	margin-top: 10px;
	color: green;
	list-style: inside;
}
.left{
	width: 500px;
}
.right{
	width: 350px;
}
#loading{
	background: url(images/loading.gif);
	z-index: 1000;
	position: fixed; top: 50%; left: 50%;
	display: none;
	width: 16px;
	height: 16px;
}
.close{
	background: url(images/close_icon.png);
	position: absolute; bottom: -20px; right: -30px;
	width: 45px; height: 45px;
	z-index: 10000;
	cursor: pointer;
	opacity: 1;
}
.close:hover{
	opacity: 0.8;
}

.plan_popup > img{
	opacity: 0.6;
}
.plan_popup > img:hover{
	opacity: 1;
}
.reg_popup > img{
	opacity: 0.6;
}
.reg_popup > img:hover{
	opacity: 1;
}
#input-stu{
	width: 280px;
	height: 25px;
	background:white url(images/search-icon.png) right no-repeat;
	border-radius: 7px;
}
span#tip-input{
	color: black;
	position: relative;
	top: -21px;
	left: 12px;
	opacity: 0.4;
}
</style>
<div id="back_popup" style="display:none; width:100%; height: 100%; position: fixed; top: 0px; left: 0px; background:black; opacity:0.68; z-index:999;"></div>
<div id="loading"></div>
<div id="plan_box">
	<span class="close"></span>
	<div>
		<div class="left">
			<span id="sec_id"></span><br />
			<span id="sec_des"></span><br />
			<span id="teacher_name"></span><br />
			<span id="subject_name"></span><br />
			<ul id="select-list">
			
			</ul>
		</div>
		<div class="right">		
			<ul id="room-list"></ul>
		</div>
	</div>
</div>
<div id="reg_box">
	<span class="close"></span>
	<div>
		<div class="left">
			<span rel="sec_id"></span><br />
			<span rel="sec_des"></span><br />
			<span rel="teacher_name"></span><br />
			<span rel="subject_name"></span><br />
			<ul id="select-stu"></ul>
		</div>
		<div class="right">
			<span id="search-input"><input type="stu-search" id="input-stu" /></span><br />
			<span id="tip-input">ค้นหา : </span>
            <ul id="stu-list"></ul>
		</div>
	</div>
</div>
<script>
	$(function(){
		$('#search-input').focusin(function(){
			$('span#tip-input').hide();
		});
		$('#search-input').focusout(function(){
			if($('#input-stu').val() == ''){ $('span#tip-input').show(); }			
		});
	});
	$(function(){
		var sec_id;
		$("a.plan_popup").click(function(event){			
			event.preventDefault();
			sec_id = $(this).attr('href');
			$.ajax({
				url: "ajax.php",
				dataType: "json",
				type: "get",
				data: {sec_id: sec_id,module: 'admin',page: 'ajax_get_room'},
				success: function(data){
					var li;
					var input;
					var send_data;
					$("#sec_id").html('รหัสชั้นเรียน : '+data.sec.sec_id);
					$("#sec_des").html('คำอธิบายชั้นเรียน : '+data.sec.sec_des);
					$("#teacher_name").html('ชื่ออาจารย์ผู้สอน : '+data.sec.teacher_name+' '+data.sec.teacher_surname);
					$("#subject_name").html('ชื่อวิชาที่สอน : '+data.sec.subject_name);
					$("#room-list").html('');
					$("#select-list").html('');
					
					for(var i=0;i<data.room.length;i++){
						li = '<li room_id="'+data.room[i].room_id+'">'+data.room[i].room_des+'</li>';
						if(data.room[i].sec_id != sec_id){
							$("#room-list").append(li);
						}
						else{
							$("#select-list").append(li);
						}
					}
					$("#back_popup").fadeIn();
					$("#plan_box").fadeIn();					
				}
			});
		});
		$("#room-list > li").live('click',function(){						
			var room_id = $(this).attr('room_id');
			var room = this;
			$.ajax({
				url: "ajax.php",
				dataType: "json",
				type: "get",
				data: {
					sec_id: sec_id,
					room_id: room_id,
					module: 'admin',
					page: 'ajax_add_plan'
				},
				beforeSend: function(){
					$("#plan_box").hide();
					$("#loading").show();
				},
				success: function(data){
					if(data.success){
						$("#loading").hide();
						$("#plan_box").show();
						$("#select-list").append(room);
					}
				}
			});
		});
		$("#select-list > li").live('click',function(){
			var room_id = $(this).attr('room_id');
			var room = this;
			$.ajax({
				url: "ajax.php",
				dataType: "json",
				type: "get",
				data: {
					sec_id: sec_id,
					room_id: room_id,
					module: 'admin',
					page: 'ajax_del_plan'
				},
				beforeSend: function(){
					$("#plan_box").hide();
					$("#loading").show();
				},
				success: function(data){
					if(data.success){
						$("#loading").hide();
						$("#plan_box").show();
						$("#room-list").append(room);
					}
				}
			});
		});
		$(window.document).keyup(function(e){
			if(e.keyCode==27){
				$("#back_popup,#plan_box").fadeOut();
			}
		});
	});
</script>
<script>
$(function(){
	var sec_id;
	$("a.reg_popup").click(function(event){
		event.preventDefault();
		sec_id = $(this).attr('href');
		$.ajax({
			url: "ajax.php",
			dataType: "json",
			type: "get",
			data: {sec_id: sec_id,module: 'admin',page: 'ajax_get_student'},
			success: function(data){
				var li;
				var input;
				var send_data;
				$("span[rel=sec_id]").html('รหัสชั้นเรียน : '+data.sec.sec_id);
				$("span[rel=sec_des]").html('คำอธิบายชั้นเรียน : '+data.sec.sec_des);
				$("span[rel=teacher_name]").html('ชื่ออาจารย์ผู้สอน : '+data.sec.teacher_name+' '+data.sec.teacher_surname);
				$("span[rel=subject_name]").html('ชื่อวิชาที่สอน : '+data.sec.subject_name);
				$("#select-stu").html('');
				$("#stu-list").html('');
				
				for(var i=0;i<data.stu.length;i++){
					li = '<li stu_id="'+data.stu[i].student_id+'">'+data.stu[i].student_name+' '+data.stu[i].student_surname+'</li>';
					if(data.stu[i].plan_id == '' || data.stu[i].plan_id == null || data.stu[i].plan_id == false){
                                            if(data.stu[i].reg_id == null || data.stu[i].reg_id == ''){
                                                    $("#stu-list").append(li);
                                            }
                                            else{
                                                    $("#select-stu").append(li);
                                            }
                                        }
                                        
				}
				$("#stu-list").find('li').hide();
				$("#back_popup").fadeIn();
				$("#reg_box").fadeIn();
                                $("#input-stu").keyup();
			}
		});
	});
	$("#input-stu").live('keyup',function(){
		var input = $("#input-stu").val()
		$("#stu-list").find('li').each(function(){
			if(($(this).text().match(input) || $(this).attr('stu_id').match(input)) && input != ''){
				$(this).show();
			}
			else{
				$(this).hide();
			}
		});
	});
	$("#stu-list > li").live('click',function(){						
		var stu_id = $(this).attr('stu_id');
		var stu = this;
		$.ajax({
			url: "ajax.php",
			dataType: "json",
			type: "get",
			data: {
				sec_id: sec_id,
				stu_id: stu_id,
				module: 'admin',
				page: 'ajax_add_reg'
			},
			beforeSend: function(){
				$("#reg_box").hide();
				$("#loading").show();
			},
			success: function(data){
				if(data.success){
					$("#loading").hide();
					$("#reg_box").show();
					$("#select-stu").append(stu);
				}
			}
		});
	});
	$("#select-stu > li").live('click',function(){
		var stu_id = $(this).attr('stu_id');
		var stu = this;
		$.ajax({
			url: "ajax.php",
			dataType: "json",
			type: "get",
			data: {
				sec_id: sec_id,
				stu_id: stu_id,
				module: 'admin',
				page: 'ajax_del_reg'
			},
			beforeSend: function(){
				$("#reg_box").hide();
				$("#loading").show();
			},
			success: function(data){
				if(data.success){
					$("#loading").hide();
					$("#reg_box").show();
					$("#stu-list").append(stu);
				}
			}
		});
	});
	$('.close').click(function(){
		$("#back_popup,#plan_box,#reg_box").fadeOut();
	});
	$(window.document).keyup(function(e){
		if(e.keyCode==27){
			$('.close').click();
		}
	});
});
</script>